.demo31 {
  position: absolute;
  width: 80px;
  height: 80px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: demo31_2 2s linear infinite;
  animation-play-state: paused;
}
.demo31 div {
  position: absolute;
  width: 40px;
  height: 40px;
  opacity: 1;
  background: #344966;
  border-radius: 50%;
  animation: demo31_1 1s linear infinite;
  animation-play-state: paused;
}
.demo31 div:nth-child(1) {
  right: 0;
  top: 0;
  animation: demo31_1 1s linear infinite;
  animation-play-state: paused;
  animation-delay: 0s;
}
.demo31 div:nth-child(2) {
  right: 0;
  bottom: 0;
  animation: demo31_1 1s linear infinite;
  animation-play-state: paused;
  animation-delay: -0.5s;
}
@keyframes demo31_1 {
  0% {
    opacity: 1;
    transform: scale(1, 1);
  }
  50% {
    opacity: 0;
    transform: scale(0, 0);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes demo31_2 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.demo31.active {
  animation-play-state: running;
}
.demo31.active div {
  animation-play-state: running;
}
.demo32 {
  position: absolute;
  width: 80px;
  height: 80px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.demo32 div {
  width: 20px;
  height: 20px;
  background: #344966;
  border-radius: 50%;
  position: absolute;
  transform: scale(1, 1);
  animation: demo32 1.6s linear infinite;
  animation-play-state: paused;
}
.demo32 div:nth-child(1) {
  left: 0;
  top: 0;
  animation-delay: 0s;
}
.demo32 div:nth-child(2) {
  left: 30px;
  top: 0;
  animation-delay: -0.2s;
}
.demo32 div:nth-child(3) {
  left: 60px;
  top: 0;
  animation-delay: -0.4s;
}
.demo32 div:nth-child(4) {
  left: 60px;
  top: 30px;
  animation-delay: -0.6s;
}
.demo32 div:nth-child(5) {
  left: 60px;
  top: 60px;
  animation-delay: -0.8s;
}
.demo32 div:nth-child(6) {
  left: 30px;
  top: 60px;
  animation-delay: -1s;
}
.demo32 div:nth-child(7) {
  left: 0;
  top: 60px;
  animation-delay: -1.2s;
}
.demo32 div:nth-child(8) {
  left: 0;
  top: 30px;
  animation-delay: -1.4s;
}
@keyframes demo32 {
  0%,
  40%,
  100% {
    transform: scale(0.3, 0.3);
  }
  70% {
    transform: scale(1, 1);
  }
}
.demo32.active div {
  animation-play-state: running;
}
.demo33 {
  position: absolute;
  width: 80px;
  height: 80px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.demo33 div {
  width: 20px;
  height: 20px;
  background: #344966;
  border-radius: 50%;
  position: absolute;
  animation: demo33 1.6s linear infinite;
  animation-play-state: paused;
}
.demo33 div:nth-child(1) {
  left: 0;
  top: 0;
  animation-delay: -1.4s;
}
.demo33 div:nth-child(2) {
  left: 30px;
  top: 0;
  animation-delay: -1.2s;
}
.demo33 div:nth-child(3) {
  left: 60px;
  top: 0;
  animation-delay: -1s;
}
.demo33 div:nth-child(4) {
  left: 60px;
  top: 30px;
  animation-delay: -0.8s;
}
.demo33 div:nth-child(5) {
  left: 60px;
  top: 60px;
  animation-delay: -0.6s;
}
.demo33 div:nth-child(6) {
  left: 30px;
  top: 60px;
  animation-delay: -0.4s;
}
.demo33 div:nth-child(7) {
  left: 0;
  top: 60px;
  animation-delay: -0.2s;
}
.demo33 div:nth-child(8) {
  left: 0;
  top: 30px;
  animation-delay: 0s;
}
@keyframes demo33 {
  0%,
  40%,
  100% {
    transform: scale(0.3, 0.3);
  }
  70% {
    transform: scale(1, 1);
  }
}
.demo33.active div {
  animation-play-state: running;
}
.demo34 {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.demo34 div {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  opacity: 1;
  background: #344966;
  animation: demo34 1.2s ease-in-out infinite;
  animation-play-state: paused;
}
.demo34 div:nth-child(1) {
  left: 40px;
  top: 0;
  animation-delay: 0s;
}
.demo34 div:nth-child(2) {
  left: 0;
  top: 80px;
  animation-delay: -0.4s;
}
.demo34 div:nth-child(3) {
  left: 80px;
  top: 80px;
  animation-delay: -0.8s;
}
@keyframes demo34 {
  0% {
    opacity: 1;
    left: 40px;
    top: 0;
  }
  17% {
    opacity: 0.3;
  }
  33% {
    opacity: 1;
    left: 0;
    top: 80px;
  }
  50% {
    opacity: 0.3;
  }
  66% {
    opacity: 1;
    left: 80px;
    top: 80px;
  }
  83% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    left: 40px;
    top: 0;
  }
}
.demo34.active div {
  animation-play-state: running;
}
.demo35 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
}
.demo35 div {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: #344966;
  border-radius: 50%;
}
.demo35 div:nth-child(1) {
  animation: demo35_1 1s linear infinite;
  animation-play-state: paused;
}
.demo35 div:nth-child(2) {
  animation: demo35_2 1s linear infinite;
  animation-play-state: paused;
}
@keyframes demo35_1 {
  0%,
  10% {
    left: 0;
    top: 0;
  }
  30%,
  40% {
    left: -100%;
    top: -100%;
  }
  60%,
  70% {
    left: 100%;
    top: -100%;
  }
  90%,
  100% {
    left: 0;
    top: 0;
  }
}
@keyframes demo35_2 {
  0%,
  10% {
    left: 0;
    top: 0;
  }
  30%,
  40% {
    left: 100%;
    top: 100%;
  }
  60%,
  70% {
    left: -100%;
    top: 100%;
  }
  90%,
  100% {
    left: 0;
    top: 0;
  }
}
.demo35.active div {
  animation-play-state: running;
}
.demo36 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
}
.demo36 div {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: #344966;
  border-radius: 50%;
}
.demo36 div:nth-child(1) {
  animation: demo36_1 1s linear infinite;
  animation-play-state: paused;
}
.demo36 div:nth-child(2) {
  animation: demo36_2 1s linear infinite;
  animation-play-state: paused;
}
@keyframes demo36_1 {
  0% {
    left: 0;
    top: 0;
  }
  17% {
    left: -100%;
    top: -200%;
  }
  34% {
    left: 100%;
    top: -200%;
  }
  50% {
    left: 0;
    top: 0;
  }
  67% {
    left: 100%;
    top: -200%;
  }
  84% {
    left: -100%;
    top: -200%;
  }
  100% {
    left: 0;
    top: 0;
  }
}
@keyframes demo36_2 {
  0% {
    left: 0;
    top: 0;
  }
  17% {
    left: 100%;
    top: 200%;
  }
  34% {
    left: -100%;
    top: 200%;
  }
  50% {
    left: 0;
    top: 0;
  }
  67% {
    left: -100%;
    top: 200%;
  }
  84% {
    left: 100%;
    top: 200%;
  }
  100% {
    left: 0;
    top: 0;
  }
}
.demo36.active div {
  animation-play-state: running;
}
.demo37 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.demo37 div {
  width: 80px;
  height: 80px;
  border: 4px dashed #344966;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: demo37 2s ease-in-out infinite;
  animation-play-state: paused;
}
.demo37 div::before {
  content: "";
  width: 72px;
  height: 72px;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid #344966;
}
@keyframes demo37 {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.demo37.active div {
  animation-play-state: running;
}
.demo38 {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.demo38 div {
  width: 40px;
  height: 40px;
  background: #344966;
  position: absolute;
  transform: rotate(0deg) scale(1);
}
.demo38 div:nth-child(1) {
  left: 0;
  top: 0;
  animation: demo38_1 2s ease-in-out infinite, demo38_3 2s ease-in-out infinite;
  animation-play-state: paused;
  animation-delay: 0s, 0s;
}
.demo38 div:nth-child(2) {
  left: 60px;
  top: 60px;
  animation: demo38_1 2s ease-in-out infinite, demo38_4 2s ease-in-out infinite;
  animation-play-state: paused;
  animation-delay: -1s, 0s;
}
@keyframes demo38_1 {
  0% {
    left: 0;
    top: 0;
  }
  25% {
    left: 60px;
    top: 0;
  }
  50% {
    left: 60px;
    top: 60px;
  }
  75% {
    left: 0;
    top: 60px;
  }
  100% {
    left: 0;
    top: 0;
  }
}
@keyframes demo38_3 {
  0% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(90deg) scale(0.3);
  }
  50% {
    transform: rotate(180deg) scale(1);
  }
  75% {
    transform: rotate(270deg) scale(0.3);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
@keyframes demo38_4 {
  0% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-90deg) scale(0.3);
  }
  50% {
    transform: rotate(-180deg) scale(1);
  }
  75% {
    transform: rotate(-270deg) scale(0.3);
  }
  100% {
    transform: rotate(-360deg) scale(1);
  }
}
.demo38.active div {
  animation-play-state: running;
}
.demo39 {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.demo39 div {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0;
  top: 0;
  background: #344966;
  transform: rotate(45deg);
  animation: demo39 1.5s linear infinite;
  animation-play-state: paused;
}
.demo39 div:nth-child(1) {
  opacity: 0;
  transform: rotate(45deg) scale(0.3);
  top: -30px;
  animation-delay: -0.85s;
}
.demo39 div:nth-child(2) {
  opacity: 1;
  transform: rotate(45deg) scale(1);
  top: 0;
  animation-delay: -1.85s;
}
.demo39 div:nth-child(3) {
  opacity: 0;
  transform: rotate(45deg) scale(0.3);
  top: 30px;
  animation-delay: -2.85s;
}
@keyframes demo39 {
  0% {
    opacity: 0;
    transform: rotate(45deg) scale(0.3);
    top: 30px;
  }
  33% {
    opacity: 1;
    transform: rotate(45deg) scale(1);
    top: 0;
  }
  66% {
    opacity: 0;
    transform: rotate(45deg) scale(0.3);
    top: -30px;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) scale(0.3);
    top: 30px;
  }
}
.demo39.active div {
  animation-play-state: running;
}
.demo40 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 30px;
}
.demo40 div {
  width: 8px;
  height: 30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #344966;
  float: left;
  animation: demo40 1s linear infinite;
  animation-play-state: paused;
}
.demo40 div:nth-child(1) {
  left: 0;
  animation-delay: 0s;
}
.demo40 div:nth-child(2) {
  left: 18px;
  animation-delay: 0.1s;
}
.demo40 div:nth-child(3) {
  left: 36px;
  animation-delay: 0.2s;
}
.demo40 div:nth-child(4) {
  left: 54px;
  animation-delay: 0.3s;
}
.demo40 div:nth-child(5) {
  left: 72px;
  animation-delay: 0.4s;
}
@keyframes demo40 {
  0% {
    height: 30px;
  }
  25% {
    height: 80px;
    background: #A994BD;
  }
  50%,
  100% {
    height: 30px;
  }
}
.demo40.active div {
  animation-play-state: running;
}
